<template>
	<div class="app-container">
		<div class="mt20">选项卡</div>
		<CustomTab v-model:curTab="curTab" :tabList="tabList" />
		<div class="mt20">次级选项卡</div>
		<CustomTab v-model:curTab="curTab" :tabList="tabList" :tabLevel="2" />
		<div class="mt20">表格</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="日期" width="120" align="center" fixed="left"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="name" label="姓名" align="center"> </el-table-column>
			<el-table-column prop="address" label="地址" width="280" align="center"> </el-table-column>
			<el-table-column label="操作" width="80" align="center" fixed="right">
				<template #default="scope">
					<el-button text>编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="mt20">多级表头</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="日期" width="150" align="center"> </el-table-column>
			<el-table-column label="配送信息" align="center">
				<el-table-column prop="name" label="姓名" width="120" align="center"> </el-table-column>
				<el-table-column label="地址" align="center">
					<el-table-column prop="province" label="省份" width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="市区" width="120" align="center"> </el-table-column>
					<el-table-column prop="address" label="地址" width="300" align="center"> </el-table-column>
					<el-table-column prop="zip" label="邮编" align="center"> </el-table-column>
				</el-table-column>
			</el-table-column>
		</el-table>
		<div class="mt20">多层级表格</div>
		<el-table
			:data="tableData1"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
			default-expand-all
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<el-table-column prop="date" label="日期" width="120"> </el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center"> </el-table-column>
			<el-table-column prop="address" label="地址" align="center"> </el-table-column>
		</el-table>
	</div>
</template>
<script setup>
import CustomTab from "@/components/CustomTab";
const tabList = ref([
	{
		name: "用户管理",
		value: "0"
	},
	{
		name: "禁用标签",
		value: "1",
		disabled: 1
	},
	{
		name: "角色管理",
		value: "2"
	}
]);
const curTab = ref(tabList.value[0].value);
const tableData = ref([
	{
		date: "2016-05-02",
		name: "王小虎",
		address: "上海市普陀区金沙江路 1518 弄"
	},
	{
		date: "2016-05-04",
		name: "王小虎",
		address: "上海市普陀区金沙江路 1517 弄"
	}
]);
const tableData1 = ref([
	{
		id: 1,
		date: "2016-05-02",
		name: "王小虎",
		address: "上海市普陀区金沙江路 1518 弄"
	},
	{
		id: 2,
		date: "2016-05-04",
		name: "王小虎",
		address: "上海市普陀区金沙江路 1517 弄"
	},
	{
		id: 3,
		date: "2016-05-01",
		name: "王小虎",
		address: "上海市普陀区金沙江路 1519 弄",
		children: [
			{
				id: 31,
				date: "2016-05-01",
				name: "王小虎",
				address: "上海市普陀区金沙江路 1519 弄"
			},
			{
				id: 32,
				date: "2016-05-01",
				name: "王小虎",
				address: "上海市普陀区金沙江路 1519 弄"
			}
		]
	}
]);
</script>
<style lang="scss">
.app-container {
	background: #071521;
	color: #fff;
	overflow: auto;
}
.mt20 {
	margin-bottom: 12px;
	font-size: 22px;
}
</style>
